<template>
	<view>
		<view class="bottom_tabbar">
			<view v-for="(item,index) in list" :key="index" @tap="changeTabbar(index)">
				<block v-if="index!=2">
					<image :src="tabbarIndex===index?item.activeImg:item.inactiveImg"></image>
					<text>{{item.text}}</text>
				</block>
				<block v-else>
					<image class="code" :src="item.activeImg"></image>
				</block>
			</view>
		</view>
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
	</view>
</template>

<script>
	import GetPhoneNumber from '../Getphonenumber/index.vue'
	export default {
		components: {
			GetPhoneNumber
		},
		props: {
			tabbarIndex: 0
		},
		data() {
			return {
				tabbarValue: 0,
				list: [{
						inactiveImg: 'https://i.ringzle.com/file/20240110/21f78c60e1124be58ce600852e5cb19f.png',
						activeImg: 'https://i.ringzle.com/file/20240110/900d57df8c7b4b27b1f27c3b9f1218b1.png',
						text: '首页',
						path: '/pages/index/index'
					},
					{
						inactiveImg: 'https://i.ringzle.com/file/20240110/4605604a2e8c4018aec7b364b3cb22dc.png',
						activeImg: 'https://i.ringzle.com/file/20240110/156c93ff401641388ef317dda81bed9f.png',
						text: '导览',
						path: '/pages/touristMap/index'
					},
					{
						inactiveImg: 'https://i.ringzle.com/file/20240110/ed49173b23b542eabbf124288b82a5e1.png',
						activeImg: 'https://i.ringzle.com/file/20240110/ed49173b23b542eabbf124288b82a5e1.png',
						text: '',
						path: '/pages/oneCodePass/index'
					},
					// {
					// 	inactiveImg: 'https://i.ringzle.com/file/20240110/d3ee1ed864b5478284e5c6d68383063d.png',
					// 	activeImg: 'https://i.ringzle.com/file/20240110/c93d7d1eef55469b84350832b60b1f1f.png',
					// 	text: '商城',
					// 	path: ''
					// },
					{
						inactiveImg: 'https://i.ringzle.com/file/20240521/744df66e067045ea8464973d283aa6e2.png',
						activeImg: 'https://i.ringzle.com/file/20240521/92e5e9ccb8f1411bba65b3b3235af710.png',
						text: '订单',
						path: '/pagesMy/order/myOrder'
					},
					{
						inactiveImg: 'https://i.ringzle.com/file/20240110/609ad46cc5c04762b287d375714958fd.png',
						activeImg: 'https://i.ringzle.com/file/20240110/8c466399711b490395988bbd312d5481.png',
						text: '我的',
						path: '/pages/my/index'
					}
				],
				loginSuccessUrl:''
			}
		},
		mounted() {
			this.tabbarValue = this.tabbarIndex;
		},
		methods: {
			//登录成功后处理事件
			loginSuccess(res) {
				if(!this.loginSuccessUrl) return
				uni.reLaunch({
					url: this.loginSuccessUrl
				})
			},
			changeTabbar(e) {
				if (!this.list[e].path) return this.$showToast('正在开发中...')
				if (e == 1) {
					uni.getLocation({
						type: 'wgs84',
						success: function(res) {
							let jingweiduinfo = {
								lon: res.longitude,
								lat: res.latitude,
							}
							uni.navigateTo({
								url: '/pages/touristMap/index?info=' + encodeURIComponent(JSON
									.stringify(jingweiduinfo))
							});
						},
						fail: error => {
							// console.log("获取定位失败了", error)
							uni.showToast({
								title: '你拒绝了授权，无法操作内容,请返回上一页',
								icon: "none",
								duration: 3000,
							})
						}
					});
				} else {
					if(e==3){
						this.loginSuccessUrl = this.list[e].path;
						this.$login().then(res => {
							if (res === 0) {
								this.tabbarValue = e;
								uni.reLaunch({
									url: this.list[e].path
								})
							} else this.$refs['phoneNumber'].show = true;
						})
					}else{
						this.tabbarValue = e;
						uni.reLaunch({
							url: this.list[e].path
						})
					}
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.bottom_tabbar {
		width: calc(100% - 50rpx);
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 60rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: fixed;
		left: 25rpx;
		bottom: 34rpx;
		z-index: 9;

		&>view {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 54rpx;
				height: 48rpx;

				&.code {
					width: 82rpx;
					height: 82rpx;
				}
			}

			text {
				margin-top: 4rpx;
				font-size: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}
	}
</style>